<template>
	<view class="container">
		<view class="classification">
			<view class="search_top">
				<view class="search_cont" @click="goSearch">
					<u-icon name="search" color="#71797F" size="25"></u-icon>
					搜索鲜花、蛋糕、礼品
				</view>
			</view>
			<view class="menu_bottom">
				<view class="menu_left">
					<view :class="{menu_item:true,active:i === menuValue}" v-for="(item,i) in menuList" :key="i"
						@click="changeCard(i)">
						{{item.name}}
					</view>
				</view>
				<view class="menu_right">
					<image src="/static/class/banner1_m.jpg" mode="widthFix" class="img"></image>
					<view class="card">
						<menuCard :list="menuCardList"></menuCard>
					</view>
				</view>
			</view>
		</view>
		<tab-bar></tab-bar>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
	} from "vuex";
	export default {
		data() {
			return {
				menuList: [],
				menuValue: 0,
				menuCardList: []
			}
		},
		computed: {
			...mapState('tabBar', ['value']),
		},
		onLoad() {
			this.getClassify()
		},
		onShow() {
			this.changeValue(1)
		},
		methods: {
			...mapMutations('tabBar', ['changeValue']),
			getClassify() {
				uni.$http.get('/api/classify/classifyGoods', {
					project_id: 295
				}).then(res => {
					this.menuList = res.data.result.splice(0, 4)
					this.menuCardList = this.menuList[0].children
				})
			},
			changeCard(index) {
				this.menuValue = index
				this.menuCardList = this.menuList[index].children
			},
			goSearch() {
				uni.navigateTo({
					url: '/search/search'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.classification {
		.search_top {
			padding: 5px 20rpx;
			background-color: #fff;
			border-bottom: 2px solid #f1f1f1;

			.search_cont {
				display: flex;
				align-items: center;
				color: #71797F;
				background-color: #F3F5F7;
				line-height: 35px;
				font-size: 14px;
				letter-spacing: 1px;
				padding-left: 10rpx;
			}
		}

		.menu_bottom {
			display: flex;
			justify-content: space-between;

			.menu_left {
				width: 21%;
				height: 90vh;
				background-color: #fff;
				padding: 15px 0;

				.menu_item {
					line-height: 40px;
					text-align: center;
					font-size: 14px;
					box-sizing: border-box;
					border-left: 2px solid transparent;
					margin: 15px 0;
				}

				.active {
					border-left: 2px solid #884e22;
					color: #884e22;
				}
			}

			.menu_right {
				width: 78.5%;
				background-color: #fff;
				padding: 10px 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				box-sizing: border-box;

				.img {
					width: 92%;
				}

				.card {
					width: 92%;
					margin-top: 15px;
					border: 1px solid #f1f1f1;
				}
			}
		}
	}
</style>